<template>
    <div>
        <user-top :title="msg"></user-top>
        <div class="noDisturbBody">
            <el-container>
                <el-header style="height:0;"></el-header>
                <el-main>
                    <div class="bodyLeft">关闭</div>
                    <div @click="openDelete"><el-switch v-model="value1" active-color="#409eff" inactive-color="#eeecf1" style="height:20px;"></el-switch></div>
                </el-main>
                <div class="bodytime" @click="timeClick">选择时间段<div><span class="timeOpen">已开启</span><i class="el-icon-arrow-right"></i></div></div>
            </el-container>
        </div>
        <div class="TimeAll" v-show="isShow" @click="aClick"></div>
        <div class="noDisturbTime">
            <div class="headers">
                <a @click="noClick">取消</a>
                <span>选择时间段</span>
                <a @click="yesClick">确定</a>
            </div>
            <div class="timeall">
                <el-time-picker v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker>
                <el-time-picker v-model="value3" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"></el-time-picker>
            </div>
        </div>
    </div>
</template>

<script>
import UserTop from "@/components/userMine/usertop.vue"
export default {
    data() {
            return {
                value1: true,
                value2: new Date(2016, 9, 10, 18, 40),
                value3: new Date(2016, 9, 10, 18, 40),
                isShow: false,
                msg:'免打扰时段设置'
            }
    },
    components: {
        UserTop
    },
    methods: {
        
        backClick(){
            this.$router.back('/inform')
        },
        timeClick(){
            var times = document.querySelector(".noDisturbTime");
            if(times.style.display=="block"){
                times.style.display = "none";
                this.isShow = !this.isShow
            }else{
                times.style.display = "block";
                this.isShow = !this.isShow
            }
        },
        noClick(){
            var times = document.querySelector(".noDisturbTime");
            times.style.display = "none";
            this.isShow = !this.isShow
        },
        yesClick(){
            var times = document.querySelector(".noDisturbTime");
            times.style.display = "none";
            var opens = document.querySelector(".timeOpen");
            opens.style.display = "inline-block";
            this.value1 = "false";
            this.isShow = !this.isShow

        },
        openDelete(){
            var opens = document.querySelector(".timeOpen");
            opens.style.display = "none";
        },
        aClick(){
            this.isShow = !this.isShow;
            var times = document.querySelector(".noDisturbTime");
            times.style.display = "none";
        }
    }
}
</script>

<style lang="scss" scoped>

.noDisturbBody{
    .bodytime{
        background-color: #fff;
        color: #333;
        line-height: 80px;
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: 1px solid #f1e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .timeOpen{
            display: none;
            color:#8f8e92;
        }
    }
    .el-main {
        background-color: #fff;
        color: #333;
        line-height: 80px;
        padding-left: 15px;
        padding-right: 15px;
        border-bottom: 1px solid #f1e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i{
            margin-right: 5px;
        }
        .bodyLeft{
            display: flex;
            align-items: center;

            
        }
        .el-switch{
            margin-right: 10px;
        }

        
    }
}
.TimeAll{
    position: absolute;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    width: 100%;
    height: 100%;
}
.noDisturbTime{
    display: none;
    height: 200px;
    background-color: #fff;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0px;

    .headers{
        height: 70px;
        background-color: #fff;
        border: 1px solid #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .el-icon-arrow-left{
            font-size: 40px;
            margin-left: 10px;
        }

        span{
            font-size: 32px;
        }

        a{
            margin-right: 30px;
            font-weight: 200;
        }
    }
    .timeall{
        display: flex;
        justify-content: space-around;
        padding: 40px;
    }
}
</style>